<template>
  <div class="register">
    <video
      src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4"
      id="myvideo"
      autoplay
      loop
      muted
      playsInline
    />
    <div class="login-box">
      <h3 class="title">欢迎注册(亲)</h3>
      <div class="box">
        <el-form
          :label-width="80"
          :model="form"
          class="myform"
          status-icon
          :rules="rules"
          ref="myform"
        >
          <el-form-item label="用户名称" prop="username">
            <el-input
              type="text"
              placeholder="请输入"
              v-model="form.username"
              :prefix-icon="User"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input
              type="text"
              placeholder="请输入"
              v-model="form.phone"
              :prefix-icon="Cellphone"
            ></el-input>
          </el-form-item>
          <el-form-item label="登陆密码" prop="password">
            <el-input
              type="password"
              placeholder="请输入"
              v-model="form.password"
              show-password
              :prefix-icon="Lock"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="dbpass">
            <el-input
              type="password"
              placeholder="请输入"
              v-model="form.dbpass"
              show-password
              :prefix-icon="Lock"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <p class="flex">
              <el-button
                type="primary"
                class="btn"
                @click="submitForm('myform')"
                >注册</el-button
              >
              <el-button type="danger" class="btn" @click="resetForm('myform')"
                >重置</el-button
              >
            </p>
          </el-form-item>
          <el-form-item class="lastitem">
            <div class="links">
              <router-link class="litem" :to="{ name: 'login' }">
                已有帐号，立即登录
              </router-link>
              <router-link class="litem color" :to="{ name: 'forgetpass' }">
                忘记密码
              </router-link>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from "vue";
import { Cellphone, Search, User, Lock } from "@element-plus/icons";
import { toast } from "@/utils";
import { reg } from "@/utils/validata";
import {ajax} from '@/api'
export default {
  setup() {
    const myform = ref();
    const state = reactive({
      form: {
        role:1
      },
      rules: {
        username: {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            pattern: reg.phone,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            pattern: reg.pwd,
            message: "请输入6-16位的字母组合",
            trigger: "blur",
          },
          {
            //判断两次密码不一致
              validator:function(rule, value, callback){
                  if(reg.pwd.test(state.form.dbpass)){
                      myform.value.validateField('dbpass')
                  }else{
                      callback()
                  }
              },
              trigger: "blur",
          }
        ],
        dbpass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            pattern: reg.pwd,
            message: "请输入6-16位的字母组合",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (value != state.form.password) {
                callback(new Error("两次密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      Cellphone,
      Search,
      User,
      Lock,
      reg,
    });
    const submitForm = () => {
      myform.value.validate(async valid => {
        if (valid) {
          // ajax
          // state.form.role=1
          console.log(state.form)
          const {code,result} =await ajax.register(state.form)
          if(code==200){
            
          }
        } else {
          toast.error("请输入有效的注册信息");
        }
      });
    };


    // async +await 内置Promise 异步变成同步
    const chacktest = async ()=>{
      // ajax.testIndex().then(res=>{
      //   console.log(res)
      // })
      let {result,msg} =await ajax.testIndex();
    }
    const resetForm = () => {
      myform.value.resetFields();
    };
    onMounted(()=>{
      chacktest()
    })
    return {
      ...toRefs(state),
      resetForm,
      submitForm,
      myform,
    };
  },
};
</script>
<style lang="scss" >
.register {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .myvideo {
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 0;
  }
  .login-box {
    position: absolute;
    width: 390px;
    height: 440px;
    // min-height:340px;
    border: 1px solid darkkhaki;
    border-radius: 8px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    .title {
      font-size: 26px;
      text-align: center;
      font-weight: 500;
      color: #fff;
    }
    .box {
      margin-top: 20px;
      .el-tabs__nav {
        width: 100%;
        .el-tabs__active-bar {
          background-color: darkorange;
        }
        .el-tabs__item {
          flex: 1;
          width: 50%;
          text-align: center;
          color: #fff;
        }
        .is-active {
          color: darkorange;
        }
      }
      .myform {
        .el-input__icon {
          color: #fff;
        }
        .el-input__inner {
          background: transparent;
          color: #fff;
        }
        .el-form-item__label {
          color: #fff;
        }

        .flex {
          display: flex;
          .btn {
            flex: 1;
          }
        }
        .lastitem {
          margin-bottom: 0;
          ::v-deep .el-form-item__content {
            line-height: 1;
          }
          .links {
            display: flex;
            justify-content: space-between;
            .litem {
              font-size: 12px;
              color: darkorange;
            }
            .color {
              color: #fff;
            }
          }
        }
      }
    }
  }
}
.lastitem {
  ::v-deep .el-form-item_content {
    line-height: 1;
  }
}
</style>